<template>
	<view>
		<!-- 遮罩层 -->
		<view class="sms-mask" v-if="isShowDialog" @click="closeDialog"></view>
		<!-- 验证码输入对话框 -->
		<view class="sms-dialog" v-if="isShowDialog">
			<view class="sms-dialog-title">请输入 6 位短信验证码</view>
			<input type="number" v-model="verificationCode" placeholder="请输入验证码" maxlength="6"
				class="sms-dialog-input" />
			<view class="sms-dialog-buttons">
				<button @click="closeDialog">取消</button>
				<button @click="confirmCode">确定</button>
			</view>
		</view>
		<!-- 触发显示对话框的按钮 -->
		<!-- <button @click="showDialog">获取验证码</button> -->
	</view>
</template>

<script>
	export default {
		props: {
			isShowDialog: {
				type: Boolean,
				default: false
			}

		},
		data() {
			return {
				verificationCode: '' // 存储用户输入的验证码
			};
		},
		methods: {
			// 显示对话框
			showDialog() {
				// this.isShowDialog = true;
			},
			// 关闭对话框
			closeDialog() {
				// this.isShowDialog = false;
				this.$emit('sms-code', "close");
			},
			// 确认验证码
			confirmCode() {
				if (this.verificationCode.length === 6) {
					// 这里可以添加验证验证码的逻辑，例如发送到服务器验证
					console.log('输入的验证码是：', this.verificationCode);
					this.$emit('sms-code', this.verificationCode);
				} else {
					uni.showToast({
						title: '请输入 6 位验证码',
						icon: 'none'
					});
				}
			}
		}
	};
</script>

<style scoped>
	.sms-mask {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-color: rgba(0, 0, 0, 0.5);
		z-index: 998;
	}

	.sms-dialog {
		position: fixed;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		background-color: #fff;
		padding: 30rpx;
		border-radius: 20rpx;
		z-index: 999;
		width: 60%;

	}

	.sms-dialog-title {
		color: #666;
		font-size: 35rpx;
		font-weight: bold;
		margin-bottom: 20rpx;
		text-align: center;
	}

	.sms-dialog-input {
		width: 90%;
		font-size: 35rpx;
		height: 80rpx;
		border: 1px solid #ccc;
		border-radius: 10rpx;
		padding: 0 10rpx;
		margin-bottom: 20rpx;
	}

	.sms-dialog-buttons {
		display: flex;
		justify-content: space-around;
	}

	.sms-dialog-buttons button {
		font-size: 30rpx;
		border: none;
		border-radius: 4px;
		cursor: pointer;
	}

	.sms-dialog-buttons button:nth-child(1) {
		background-color: #ccc;
	}

	.sms-dialog-buttons button:nth-child(2) {
		background-color: #007aff;
		color: #fff;
	}
</style>